<template>
    <div style="position: relative;">
        <div class="flex_c flex_between_c">
             <div :class="data.inv?'shu':'heng'" v-for="(item,index) in data.sources_num>0?g_list.slice(0,Math.min(4,data.sources_num)):g_list" :key="index" 
             :style="'border-radius:'+data.g_radius+'px;margin-top:'+data.g_margin_top+'px;margin-left:'+data.g_margin_w+'px;margin-right:'+data.g_margin_w+
                 'px;background-color:'+data.g_background+';padding:'+data.g_padding+'px;'+(data.inv?'width: '+(50-data.g_margin_w)+'%;':('height:'+data.height+'px;'))+
                 (data.g_is_border?('box-shadow:'+ data.g_shadow_color+' 0px 0px '+ data.g_shadow_size+'px;border:'+data.g_border_size+'px solid '+data.g_border_color):'')">
                 <div v-if="data.inv">
                    <div :style="{height:data.height+'px'}">
                        <img  class="sp_img" :src="item.img" :style="{width:'100%',height:'100%',borderRadius:data.g_img_radius+'px'}">
                        
                    </div>
            
                    <div class="infor_c" :class="data.inv?'':'kuan'">
                            <div class="sp_tit"  :style="{fontSize:data.title_fize+'px',color:data.title_coloe }">{{item.title}}</div>
                            <div :style="{color:data.tags,fontSize:data.tags_fize+'px',whiteSpace: 'nowrap',overflow: 'hidden',textOverflow: 'ellipsis'}">{{item.label}}</div>
                            <div class="flex_row_c" :style="{marginTop:data.price_top+'px'}">
                            <div v-if="data.prefix_label&&data.prefix_label!=''" class="hy_bq" 
                            :style="{'color':data.prefix_color,background:data.prefix_bg,fontSize:data.prefix_size+'px',borderRadius:data.prefix_radius+'px'}">{{data.prefix_label}}</div>
                            <div  :style="{color:data.price_color,fontSize:data.price_fize+'px'}" class="shop_old_price">¥{{item.real_price}}</div>
                            <!-- <view class="left_hai" :style="{'border':'1px solid '+data.price_color}" v-if="buy > 0&&rules.status>0"
                            :style="{'color':data.price_color}">+{{ rules.title }}{{ buy }}</view> -->
                        </div>
                        <div class="show_price" :style="{color:data.price_yuan_color,fontSize:data.price_yuan+'px'}">¥{{item.show_price}}</div>

                    </div>
                </div>
             
                    <img v-if="!data.inv" class="sp_img" :src="item.img" :style="{width:data.g_img_width+'%',height:'100%',borderRadius:data.g_img_radius+'px'}">
           
                <div v-if="!data.inv" class="infor_c infor_c1" style=" position: relative;">
                        <div class="sp_tit "   :style="{fontSize:data.title_fize+'px',color:data.title_coloe}">{{item.title}}</div>
                        <div :style="{color:data.tags,fontSize:data.tags_fize+'px',whiteSpace: 'nowrap',overflow: 'hidden',textOverflow: 'ellipsis'}">{{item.label}}</div>
                        <div class="flex_row_c" :style="{marginTop:data.price_top+'px'}">
                            <div v-if="data.prefix_label&&data.prefix_label!=''" class="hy_bq" 
                            :style="{'color':data.prefix_color,background:data.prefix_bg,fontSize:data.prefix_size+'px',borderRadius:data.prefix_radius+'px'}">{{data.prefix_label}}</div>
                            <div  :style="{color:data.price_color,fontSize:data.price_fize+'px'}" class="shop_old_price">¥{{item.real_price}}</div>
                            <!-- <view class="left_hai" :style="{'border':'1px solid '+data.price_color}" v-if="buy > 0&&rules.status>0"
                            :style="{'color':data.price_color}">+{{ rules.title }}{{ buy }}</view> -->
                        </div>
                        <div class="show_price" :style="{color:data.price_yuan_color,fontSize:data.price_yuan+'px'}">¥{{item.show_price}}</div>

                        <i class="cat " :class="data.class_font" :style="{fontSize:data.class_font_size+'px',color:data.class_font_color,
                            backgroundColor: data.icon_color,width: data.icon_size+'px',height: data.icon_size+'px',lineHeight:data.icon_size+'px',borderRadius:data.icon_radius+'px'}"/>
                        
                </div>
            </div>
          
        </div>
       
    </div>
</template>

<script>

    export default {
        props:['data'],
        name: 'ItemCommodities',
        data(){
            return{
                g_list:[
                    {img:require("@/image/model/shangpin.jpg"),title:'商品标题商品标题商品标题商品标题商品标题',label:'副标题副标题',real_price:'125.00',show_price:'150.00'},
                    {img:require("@/image/model/shangpin.jpg"),title:'商品标题商品标',label:'副标题副标题',real_price:'125.00',show_price:'150.00'},
                    {img:require("@/image/model/shangpin.jpg"),title:'商品标题商品标',label:'副标题副标题',real_price:'125.00',show_price:'150.00'},
                    {img:require("@/image/model/shangpin.jpg"),title:'商品标题商品标',label:'副标题副标题',real_price:'125.00',show_price:'150.00'},
                ],
            }
        }
     
	
    }
</script>

<style >
.flex_c{
    display: flex;
    flex-wrap: wrap;
    
}
.flex_between_c{
    justify-content: space-evenly;
}
.yuan{
    text-decoration:line-through; 
}
.shu{
    
    background-color: #fff;
    overflow: hidden;

}
.shu .sp_tit{
    width: 100%;
}
.infor_c{
    padding: 5px;
    padding-top: 0;
    
}
.infor_c1{
    flex: 1;
    width: 0;
}
.heng{
    width: 100%;
    display: flex;
}
.kuan{
    width: 85%;
   
}
.cat{
    position: absolute;
    text-align: center;
    display: block;
    right: 10px;
    bottom:5px;
}

	.hy_bq{
		background: #474548;
		border-radius: 6px;
		font-size: 10px;
		color: #fae3ba;
		padding: 0 5px;
		margin-right: 5px;
	}
    .shop_old_price {
        
        letter-spacing: 1px;
        font-weight: 600;
		 margin-right:5px;
    }
    
    .left_hai {
        font-size:22px;
        padding:3upx 7px;
        border-radius:10px;
        margin-right:10px;
        font-weight: normal;
    }
    .show_price {
        color:#999;
        font-size: 22px;
        text-decoration: line-through;
       
    }
    .flex_row_c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
}
</style>
